<template>
	<view class="container">
		<!-- 轮播组件 -->
		<view class="custom-swiper" :style="{
	textAlign:params.align,
	color:params.color,
	background:params.bgpic ? 'url('+params.bgpic+')' : params.bgcolor,
	backgroundSize:'100%',
	margin:params.margin_y*2.2+'rpx '+params.margin_x*2.2+'rpx 0',
	
	fontWeight:params.fontbold?'bold':'normal'
}">
			<!-- 标题区域 -->
			<view class="title-container">
				<view v-for="(item, index) in data" :key="index"
					:class="['title-item', currentIndex === index ? 'active' : '']" 
					:style="{
					    color: currentIndex === index ? params.color1 : params.color,
					    fontWeight: params.fontbold ? 'bold' : 'normal',
						fontSize:params.fontsize*2.2 + 'rpx'
					  }"
					@tap="changeSwiper(index)">
					<view class="title-circle">
						
						<view class="title-text">{{ item.title }}</view>
						<view class="arrow" v-if="index < data.length - 1">>></view>
					</view>
				</view>
			</view>

			<view class="content-box">
				<!-- 轮播图区域 -->
				<swiper class="swiper-container" :style="{height:params.height*2.2+'rpx'}" :current="currentIndex" @change="handleSwiperChange" :autoplay="autoplay"
					:interval="interval" :circular="circular">
					<swiper-item v-for="(item, index) in data" :key="index">
						<view class="content-card" >
							<image class="content-card-image"  :src="item.imgurl" mode="aspectFill"
								@click="handleImageClick(item)"></image>
						</view>
					</swiper-item>
				</swiper>
				
				<!-- 底部操作按钮 -->
				<view class="indicator" v-if="params.src" :style="{background:params.bgcolor1}" @tap="playVideo">
					<image class="play"
						src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250325/ad45480dd1eed6772830eff82c8ee14b.png"
						mode="aspectFill"></image>
					<view class="play-text">{{params.src_name}}</view>
				</view>
			</view>
		</view>
		<view class="preview-mask" v-if="showVideo">
			<video class="preview-swiper" :src="params.src" poster controls></video>
			<view class="preview-footer">
				<view class="preview-btn" @tap="closeVideo">
					<text>退出播放</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CustomSwiper",
		props: {
			params:{},
			data:{},
			
			// 是否自动播放
			autoplay: {
				type: Boolean,
				default: true
			},
			// 自动播放间隔(ms)
			interval: {
				type: Number,
				default: 3000
			},
			// 是否循环播放
			circular: {
				type: Boolean,
				default: true
			},
			// 新增视频数据
			videoData: {
				type: Object,
				default: () => ({
					url: "https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250329/a59331c7459e43f97e090cf3f03e6cae.mp4",
					poster: "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250122/f1f1dfc58d9a1fb1777f4680f191d588.jpg"
				})
			}
		},
		data() {
			return {
				currentIndex: 0,
				showVideo: false
			};
		},
		methods: {
			// 切换轮播
			changeSwiper(index) {
				if (index === this.currentIndex) return;
				this.currentIndex = index;
			},

			// 轮播变化事件
			handleSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},

			// 图片点击事件
			handleImageClick(item) {
				if (item.link) {
					uni.navigateTo({
						url: item.link
					});
				}
			},

			// 播放视频方法
			playVideo() {
				this.showVideo = true;
			},

			// 关闭视频方法
			closeVideo() {
				this.showVideo = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		box-sizing: border-box;
	}

	.custom-swiper {
		width: 100%;
		position: relative;
		background: linear-gradient(to bottom, #122c2b, #062221);
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.title-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0;
		position: relative;
		z-index: 10;
	}

	.title-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title-circle {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.title-circle-text {
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		border-radius: 50%;
		text-align: center;
		background: #4f7c7a;
		font-size: 24rpx;
		color: #000;
	}
	.title-text {
		font-size: 24rpx;
		text-align: center;
		padding: 0 10rpx;
	}

	.swiper-container {
		width: 100%;
		.content-card {
			width: 100%;
			height: 100%;
			box-sizing: border-box;

			&-image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}
	}
	.content-box{
		display: flex;
	}
	.indicator {
		width: 25%;
		margin-left: 10rpx;
		background: #183231;
		color: #fff;
		font-size: 24rpx;
		padding: 6rpx 24rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		overflow: hidden;
	}

	.play {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 10rpx;
	}

	.preview-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		z-index: 999;
		display: flex;
		flex-direction: column;
	}

	.preview-swiper {
		flex: 1;
		width: 100%;

		.preview-image {
			width: 100%;
			height: 100%;
		}
	}

	.preview-footer {
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;

		.preview-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #fff;
			background: #363636;
			padding: 10rpx 20rpx;
			border-radius: 36rpx;

			text {
				font-size: 24rpx;
			}
		}
	}
</style>